import { PureComponent } from "react";
import { connect } from "react-redux";
import { addAgeFn } from "../store/modules/useInfo/actionCreators";

class About extends PureComponent {
  render() {
    const { person } = this.props;
    return (
      <div>
        About
        <div>
          name:{person.name} -- {person.age}
        </div>
        <button onClick={() => this.props.addAge(1)}>点我年龄+1</button>
        <button onClick={() => this.props.addAge(2)}>点我年龄+2</button>
        <button onClick={() => this.props.addAge(-5)}>点我年龄-5</button>
      </div>
    );
  }
}

// 设置需要用到的仓库数据
const mapStateToProps = state => ({ person: state.useInfo });
const mapDispatchToProps = dispatch => ({
  // addAge: age => {
  //   dispatch(addAgeFn(age));
  // },
  addAge(age) {
    dispatch(addAgeFn(age));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(About);
